<!doctype html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>demo</title>
 <style>
  7         h3 {
  8             display:block;
  9             width:200px;
 10             margin:30px auto;
 11             text-align:center
 12         }
 13         table {
 14             width:400px;
 15             margin:10px auto;
 16 
 17         }
 18            
 19         #codeInput {
 20             width:90px;
 21         }
 22         .la {
 23             text-align:right
 24         }
 25         .control {
 26             line-height:50px;
 27         }
 28     </style>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script language="javascript">
     var clock = '';
	 var nums = 60;
	 var btn;
	function get_mobile_code(thisBtn){	
	    var mobile = $("#mobile").val();
            if (!isMobile(mobile)) {
                alert("手机号码空或格式错误，请重新输入");
              }		 
        else{
        $.post('/Test_Info/util/Demo1', {mobile:jQuery.trim($('#mobile').val())}, function(msg) {
                         alert("手机验证码发送成功");
                         sendCode(thisBtn);
    
        });
      }
             
	     
	};
	
	
	
	 var clock = '';
	 var nums = 60;
	 var btn;
	 function sendCode(thisBtn)
	 { 
		 btn = thisBtn;
		 btn.disabled = true; //将按钮置为不可点击
		 btn.value = nums+'秒后可重新获取';
		 clock = setInterval(doLoop, 1000); //一秒执行一次
	 }
	 function doLoop()
	 {
		 nums--;
		 if(nums > 0)
		 {
		  btn.value = nums+'秒后可重新获取';
	 }else{
		  clearInterval(clock); //清除js定时器
		  btn.disabled = false;
		  btn.value = '点击发送验证码';
		  nums = 60; //重置时间
		 }
	 } 
	
	
	 //手机号码验证
        function isMobile(s) {
              var reg=/^((1[0-9][0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/; 
             if (!reg.exec(s)) {
                return false;
             }
            return true;
            
         }
</script>
<body>
<form action="#" method="post" name="formUser" ">
	<table width="100%"  border="0" align="left" cellpadding="5" cellspacing="3">
		<tr>
			<td align="right" class="la">手机<td>
			<input id="mobile" name="phone" type="text" required="required" size="25"/><span style="color:#FF0000"> *</span> 
	        <input id="zphone" type="button" value=" 发送手机验证码 " 
	        placeholder="请获取验证码后输入" onClick="get_mobile_code(this);"  style="display: inline"></td>
        </tr>
		<tr class="control">
			<td align="right" class="la" required="required">验证码</td>
			<td><input type="text" size="8" name="mobile_code" class="inputBg" /></td>
		</tr>
		<tr>
             <td></td>
             <td><input type="reset" value="重置" />
             <input type="submit" value="提交"/></td>
        </tr>
	</table>
</form>
</body>
</html>